<template>

<el-form ref="form" :model="form" label-width="80px">
  <el-form-item label="店铺名称">
    <el-input v-model="shopInfo.sname"></el-input>
  </el-form-item>

  <el-form-item label="店铺老板">
    <el-input v-model="shopInfo.sowner"></el-input>
  </el-form-item>

  <el-form-item label="店铺地址">
    <el-input v-model="shopInfo.address"></el-input>
  </el-form-item>

  <el-form-item label="店铺图片">
<!--    <el-input v-model="shopInfo.image"></el-input>-->
    <el-upload
      class="avatar-uploader"
      action="/api/shopUpload"
      :show-file-list="false"
      :on-success="handleAvatarSuccess"
      :before-upload="beforeAvatarUpload">

      <img v-if="shopInfo.image" :src="shopInfo.image" class="avatar">

      <i v-else class="el-icon-plus avatar-uploader-icon"></i>

    </el-upload>
  </el-form-item>

  <el-form-item label="联系电话">
    <el-input v-model="shopInfo.phone"></el-input>
  </el-form-item>

  <el-form-item label="店铺描述">
    <el-input v-model="shopInfo.sdesc"></el-input>
  </el-form-item>
  <!--<el-form-item label="活动时间">
    <el-col :span="11">
      <el-date-picker type="date" placeholder="选择日期" v-model="form.date1" style="width: 100%;"></el-date-picker>
    </el-col>
    <el-col class="line" :span="2">-</el-col>
    <el-col :span="11">
      <el-time-picker placeholder="选择时间" v-model="form.date2" style="width: 100%;"></el-time-picker>
    </el-col>
  </el-form-item>-->
  <el-form-item>
    <el-button type="primary" @click="update('form')">修改</el-button>
    <el-button @click="exits()">取消</el-button>
  </el-form-item>
</el-form>

</template>
<script>
  import axios from "axios";

  export default {
    data() {
      return {
        shopInfo:
          {
            address: '',
            image: '',
            phone: '',
            sdesc: '',
            sname: '',
            sowner: '',
            sid: ''
          }
      }
    },
    mounted() {

      var sid = this.$route.params.sid
      //通过id 去后台进行查询数据
      axios.get("/api/selectShopById/" + sid).then(res => {
        this.shopInfo = res.data;
      })
      this.shopInfo = {
        "address": "南窑头",
        "image": "ggj",
        "phone": "145145",
        "sdesc": "南窑头",
        "sname": "皇家九号",
        "sowner": "145145",
        "sid": "1"
      }
    },
    methods: {
      update: function (formName) {

        axios.post("/api/updateShop/", this.shopInfo).then(res => {

          if (res.data == "success") {
            this.$router.push("/ShopIndex/");
          } else {
            alert("修改失败!!!!");
          }
        })
      },

      handleAvatarSuccess(res, file) {
        this.shopInfo.image = URL.createObjectURL(file.raw);
      },


      beforeAvatarUpload(file) {
        const isJPG = file.type === 'image/jpeg';
        const isLt2M = file.size / 1024 / 1024 < 2;

        if (!isJPG) {
          this.$message.error('上传商铺图片只能是 JPG 格式!');
        }
        if (!isLt2M) {
          this.$message.error('上传商铺图片大小不能超过 2MB!');
        }
        return isJPG && isLt2M;
      },
      exits: function(){
        this.$router.push("/ShopIndex/");
      }
    }
  }
</script>
<style scoped>
  .avatar-uploader {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    width: 178px;
  }

  .avatar-uploader :hover {
    border-color: #409EFF;
  }

  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }

  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }

</style>
